<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<button @click="btnClick">{{refProps.city.value}}</button>
	</view>
</template>

<script setup lang="ts">
	//--包模块引入
	import eventBus from '@/common/event/eventBus';
	import { Consts, HTTP_API_URL } from '@/common/consts/Consts';
	import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive, ref, toRef, toRefs } from 'vue';
	import LogUtil, { LOG_LEVEL } from '@/common/utils/LogUtil';
	import { globlData } from '@/common/globData/GloblData';
	import type { IUserVo } from '@/logic/globInterface/dataInterface';
  import { HttpMethod, httpUtil } from '@/common/netWork/httpUtil';
	const title = ref('Hello')
	LogUtil.log(LOG_LEVEL.DEBUG,"onLaunch",globlData.getAppHttpHost())
	//--数据声名 setup 方式 规范 每个vue 实例 都要规范声明
	//--使用数据定义 类型注解
	//--TS专有声明，有默认值
	interface Props {
	    city: string
	    itemArr: Array<IUserVo>
	}
	// const props = withDefaults(defineProps<Props>(), {
	//     city: "北京",
	//     itemArr:()=>{
	// 		return new Array<IUserVo>();ßßß
	// 	}
	// })
	const props = reactive({city:'北京',
							itemArr:new Array<IUserVo>()
					})
	//--事件定义
	const emit = defineEmits(['change', 'delete','update'])
    //vue3 使用mit事件 eventBus.on() //uni 使用 uni.$on("")
	
	//--使用 toRef方法 转为引用使用 取值操作最后都要使用.value获取
	// const city = toRef(props,"city","西安")
	const refProps = toRefs(props);
	// console.log("222=>" + refProps.city.value)
	console.log("333=>" + refProps)
	//--方法区 --生命周期方法
	//--组件挂载到节点上之前执行 一般加载数据
	onBeforeMount(()=>{
		// refProps.city.value = "西安";
		// city.value =  "西安";
		console.log("1=>" + refProps.city)
	})
	//--组件挂载完成后执行
	onMounted(()=>{
	})
	// 组件更新之前执行
	onBeforeUpdate(()=>{

	})
	//组件更新完成执行
	onUpdated(()=>{

	})

	//--事件方法响应定义区18710623877
	async function  btnClick(ev:MouseEvent){
		console.log("4=>" + refProps.city)
		let data = await httpUtil.request(HTTP_API_URL.USER_LOGIN,HttpMethod.POST,{"mobile":"18710623877"});
		console.log(data)
		let information=await httpUtil.request(HTTP_API_URL.MSG_QUERYMSGDETAIL,HttpMethod.GET,{})
	}
	//--方法区 --自定义方法
	function customFunc(){

	}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
